<template>
    <ElDialog
        v-model="modelVisible"
        :title="getModalTitle()"
        width="30%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        @close="modalClose"
    >
        <el-form ref="formRef" :model="sourceData" :rules="rules">
            <el-form-item label="分类名" name="title" prop="title">
                <el-input v-model="sourceData.title" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="modelVisible = false">取消</el-button>
                <el-button
                    :loading="finfishSubmitLoading"
                    type="primary"
                    @click="formFinish"
                >
                    保存
                </el-button>
            </span>
        </template>
    </ElDialog>
</template>
<script setup lang="ts">
/* --------------------------------- DEFAULT -------------------------------- */
import { defineProps, defineEmits, computed, ref, reactive, watch } from "vue"
import {
    type FormRules,
    type FormInstance,
    ElMessage,
    ElDialog,
} from "element-plus"
/* ----------------------------------- API ---------------------------------- */
import { CateAdd, CateEdit } from "@/api/articles"

/* ---------------------------------- TYPE ---------------------------------- */

/* ----------------------------------- UI ----------------------------------- */

/* -------------------------------- interface ------------------------------- */
interface FormSourceType {
    title?: string
}

/* --------------------------------- Content -------------------------------- */
// TODO::暂时想不到传参的解决方法
const props = defineProps<{
    visible: boolean
    title?: string
    id?: number
}>()

const emit = defineEmits<(event: "update:visible", val: boolean) => void>()

const formRef = ref<FormInstance>()
const finfishSubmitLoading = ref<boolean>(false)
const sourceData = reactive<FormSourceType>({})
const modelVisible = computed({
    get: (): boolean => {
        return props.visible
    },
    set: (val: boolean): void => {
        emit("update:visible", val)
    },
})

const rules = reactive<FormRules<FormSourceType>>({
    title: [{ required: true, message: "分类名不能为空" }],
})

watch(modelVisible, () => {
    if (modelVisible.value) {
        sourceData.title = props.title
    }
})

/* -------------------------------- Content-Function -------------------------------- */
const getModalTitle = (): string => (props.id ? "编辑" : "添加")

const formFinish = (): void => {
    formRef.value?.validate(async (el) => {
        if (!el) {
            return
        }

        finfishSubmitLoading.value = true
        const { code, message } = await (props.id
            ? CateEdit(props.id, sourceData.title as string)
            : CateAdd(sourceData.title as string))
        finfishSubmitLoading.value = false
        ElMessage({
            message,
            type: code !== 200 ? "warning" : "success",
        })

        emit("update:visible", false)
    })
}

const modalClose = (): void => {
    // resetSourceData()
    formRef.value?.clearValidate()
}
</script>
